<template>
  <div class="main">
    <section>
      <search-form
        :listQuery="queryParams"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-button v-if="rightsButtons['sync']" type="primary" class="btn-block" :loading="syncdelay" @click="doSyncCategory">马上同步</el-button>
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="类目ID"
        >
          <template slot-scope="scope">
            <span>{{scope.row.cid}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="类目名"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.enabled === 1?'已上架':'已下架'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
          prop="merchantName"
          min-width="160"
        >
          <template slot-scope="scope">
            <span>{{scope.row.createdAt}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-switch
              style="display:block"
              v-model="scope.row.enabled"
              @change="updateStatus(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="上架"
              inactive-text="下架"
              :active-value="1"
              :inactive-value="0"
              :disabled="!rightsButtons['operate']"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="queryParams.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
import {
  getDdkList,
  setDdkStatus,
  syncDdkCategory
} from '@/api/bihuasuan/goods'

export default {
  name: 'b-goodsDdkManage',
  components: {
    searchForm
  },
  data() {
    return {
      syncdelay: false,
      queryParams: {
        endTime: '',
        startTime: '',
        id: '',
        topicId: '',
        topicName: '',
        pageNum: 0,
        pageSize: 50,
        enabled: ''
      },
      queryConfig: [
        {
          prop: 'title',
          type: 'input',
          label: '类目名'
        },
        {
          prop: 'enabled',
          type: 'select',
          label: '类目状态',
          data: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '已上架',
              value: 1
            },
            {
              label: '已下架',
              value: 0
            }
          ]
        }
      ],
      loading: true,
      listTotal: 0,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await getDdkList(this.queryParams)
        this.loading = false
        this.list = data.list
        this.listTotal = data.total
      } catch (error) {
        this.list = []
        this.listTotal = 0
        this.loading = false
      }
    },
    // 上下架
    async updateStatus(val) {
      try {
        const { data } = await setDdkStatus({
          id: val.id,
          enabled: val.enabled
        })
        if (data) {
          this.$message.success('修改成功')
          this.getList()
        }
      } catch (error) {
        console.log(error)
        this.$message.success('修改失败')
      }
    },
    // 商品类目同步
    async doSyncCategory() {
      this.syncdelay = true
      try {
        const { data } = await syncDdkCategory()
        if (data) {
          this.$message.success('同步成功')

          this.queryParams.pageNum = 1
          this.$children[0].resetForm('searchForm')
          this.getList()
        } else {
          this.$$message.error('同步失败')
        }
        this.syncdelay = false
      } catch (error) {
        this.syncdelay = false
        this.$message.error('同步失败')
      }
    },
    search() {
      this.queryParams.pageNum = 1

      if (this.queryParams.createDate) {
        this.queryParams.startTime = this.queryParams.createDate[0]
        this.queryParams.endTime = this.queryParams.createDate[1]
        delete this.queryParams.createDate
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }

      this.getList()
    },
    handleSizeChange(value) {
      this.queryParams.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.queryParams.pageNum = value
      this.getList()
    }
  }
}
</script>
